import { Layout } from 'antd'
import styles from './index.less'
import { NavLink, getLocale, setLocale, useIntl } from 'umi'
import Theme from '@/components/theme'
import Language from '@/components/language';
// import Search from '@/components/search'
import { useState } from 'react'
import cls from 'classnames'
import ColorPick from '@/components/colorPick'

const { Header } = Layout;


const MyHeader: React.FC = () => {
  const [visible, showVisible] = useState(false)
  const [curindex, setcurindex] = useState(0)
  const intl = useIntl();
  const navState = [
    {
      to: '/',
      text: intl.formatMessage({id: 'copy'})
    },
    {
      to: '/archives',
      text: intl.formatMessage({id: 'archives'})
    },
    {
      to: '/knowledge',
      text: '知识笔记'
    },
    {
      to: '/page/msgboard',
      text: '留言板'
    },
    {
      to: '/page/about',
      text: '关于'
    },
  ]

  return <Header className={styles.header}>
    <div className="container">
      <NavLink to="/">
        <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="" />
      </NavLink>
      <div className={cls(styles.mobileNav, visible ? styles.active : '')} onClick={() => showVisible(!visible)}>
        <span className={styles.stick}></span>
        <span className={styles.stick}></span>
        <span className={styles.stick}></span>
      </div>
      <nav className={cls(visible ? styles.mobileMenu : '')}>
        <ul>
          {
            navState.map((item, index) => {
              return <li key={index} className={curindex == index ? styles.active : ''} onClick={() => setcurindex(index)}>
                <NavLink to={item.to}>{item.text}</NavLink>
              </li>
            })
          }
        </ul>
        <ul>
          <ColorPick />
          <Language />
          <Theme />
          {/* <Search /> */}
        </ul>
      </nav>
    </div>
  </Header>
}

export default MyHeader;